<template>
	<view class="back">
	<view class="container">
	<view>
		<view class="user-info">
		  <image class="avatar" v-if="url" :src="url"></image>
		  <image class="avatar" v-else src="../../static/images/user.jpg"></image>
		  <text class="user-name" >{{currName}}</text>
		</view>
		<!-- <button @click="login">
			点击 @click="goToMemberPage"
		</button> -->
	</view>
	 <view class="card" @click="goToMemberPage">
	      <view class="left-content">
	        <image style="width: 80rpx;height: 80rpx; border-radius: 50%;" src="../../static/icon/me.png"></image>
	        <text class="manage-members">管理成员</text>
	      </view>
	      <view class="right-content">
			<image style="width: 80rpx;height: 60rpx; border-radius: 50%;" src="../../static/icon/me.png"></image>
			<image style="width: 80rpx;height: 60rpx; border-radius: 50%;margin-left: -40rpx;" src="../../static/icon/me.png"></image>
	        <text class="arrow">></text>
	      </view>
		  </view>
	</view>
	
	<button v-if="uid != ''" class="logout-btn" @click="logout" style="color: red;justify-content: center;">退出登录</button>
	<button v-else style="color: red;justify-content: center;" @click="login">点击登陆</button>
	</view>
</template>

<script>
import {getToken,removeToken} from "@/utils/auth.js"
	export default {
		data() {
		 return {
					currName:this.$store.state.user.name,
					showConfirmationDialog: false, // 控制弹窗显示
					uid : this.$store.state.user.userId,
					url : this.$store.state.user.avatar
				};
		},
		methods: {
		goToMemberPage() {
		  uni.navigateTo({
		    url: '/pages/member/member'
		  });
		},
		login() {
			uni.navigateTo({ url: '/pages/index/index' });
			// uni.login({
			//   provider: 'weixin',
			//   onlyAuthorize:true,
			//   success: function (loginRes) {
			// 		console.log("success")
			//     console.log(loginRes.code);
			//   },
			// 	fail: function(err){
			// 		console.log(err)
			// 	}
			// });
		},
		 logout() {
		      // 显示确认退出登录的弹窗
		      uni.showModal({
		        title: '确定要退出登录吗？',
		        cancelText: '取消',
		        confirmText: '确定',
		        confirmColor: '#17A8E4',
		        cancelColor: '#d7d7d7',
		        success: (res) => {
		          if (res.confirm) {
								removeToken();
								this.$store.dispatch("LogOut",this.$store.state)
								this.uid = ''
								this.currName = "未登陆"
		          } else {
		            // 用户点击了取消按钮，不执行任何操作
		          }
		        }
		      });
		    }
		 }
	}
</script>

<style>
.back {
  /* 	position: absolute; */
  /* width: 375px; */
	width: 100vw;
  height: 450rpx;
  left: 0px;
  top: 0px;
  background: linear-gradient(179.81deg, #17A8E4 1.16%, #94D6E2 29.03%, #FFFFFF 70.53%);
}

.container {
  margin-top: 6%;
  padding: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-top: 15%;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-name {
  font-size: 35rpx;
  color: #FFFFFF;
}

.card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50rpx;
  margin-top: 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 4px 4px 4px #94D6E2;
}

.left-content {
  display: flex;
  align-items: center;
}

.manage-members {
  font-size: 28rpx;
  margin-left: 20rpx;
}

.right-content {
  display: flex;
  align-items: center;
}

.arrow {
  font-size: 30rpx;
  color: #17A8E4;
}

.logout-btn {
	margin-top: 340rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 3%;
	margin-right: 3%;
  background-color: #dfdfdf;
  border-radius: 20rpx;
  font-size: 40rpx;
  cursor: pointer;
}
</style>
